<template>
    <div class="login">
        <ul :class="isFold ? 'active' : ''">
            <li @click="handleClick">
                <div class="title">
                    <div>微信</div>
                    <div class="title">30分钟前</div>
                </div>
                <h4>阿伟死了</h4>
                <div>我die了</div>
            </li>
            <li>
                <div class="title">
                    <div>微信</div>
                    <div class="title">30分钟前</div>
                </div>
                <h4>阿伟死了</h4>
                <div>我die了</div>
            </li>
            <li>
                <div class="title">
                    <div>微信</div>
                    <div class="title">30分钟前</div>
                </div>
                <h4>阿伟死了</h4>
                <div>我die了</div>
            </li>
            <li>
                <div class="title">
                    <div>微信</div>
                    <div class="title">30分钟前</div>
                </div>
                <h4>阿伟死了</h4>
                <div>我die了</div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isFold: false,
        };
    },
    methods: {
        handleClick() {
            this.isFold = !this.isFold;
        },
    },
};
</script>

<style scoped>
ul {
    list-style: none;
}

.login {
    display: flex;
    height: 80vh;
    justify-content: center;
    padding-top: 80px;
    background: url(../assets/images/wallhaven-x88vgl.png) no-repeat;
    background-size: cover;
    perspective: 1000px;
}
h4 {
    margin: 0;
}

ul {
    width: 400px;
    cursor: pointer;
    position: relative;
    /* 让消息盒子整体变成3d元素 */
    transform-style: preserve-3d;
}

ul li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    text-align: left;
    transition: .6s;
}
ul li title {
    display: flex;
    justify-content: space-between;
}
ul li .time {
    color: #666;
}

ul li:nth-child(2) {
    z-index: -1;
    color: transparent;
    transform: translateY(8px) translateZ(-24px);
    background: rgba(255, 255, 255, 0.6);
}
ul li:nth-child(3) {
    z-index: -2;
    color: transparent;
    transform: translateY(16px) translateZ(-48px);
    background: rgba(255, 255, 255, 0.5);
}
ul li:nth-child(4) {
    z-index: -3;
    color: transparent;
    transform: translateY(24px) translateZ(-72px);
}
ul.active li {
    color: #000;
    background: rgba(255, 255, 255, 0.7);
}
ul.active li:nth-child(2) {
    transform: translateY(calc(100% + 10px));
}
ul.active li:nth-child(3) {
    transform: translateY(calc(200% + 20px));
}
ul.active li:nth-child(4) {
    transform: translateY(calc(300% + 30px));
}
</style>
